<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="{{asset('css/index.css')}}">
</head>

<body>
<header>
    <nav>
        <ul>
            <li class="logo">
                <a href="{{route('material-query')}}">
                    <img src="../assets/logo@3x.png" alt="logo">
                    <span class="f-w-m">推辞网</span>
                </a>
            </li>
        </ul>
    </nav>


    <div class="header-content">
        <p class="f-w-m">
            中国化妆品原料法规数据库
        </p>
        <div class="header-content-search-wrap">
            <div class="select-wrap">
                <input class="select-item select-all" id="all" type="radio" checked name="select">
                <input class="select-item select-cas" id="cas" type="radio" name="select">
                <input class="select-item select-name_en" id="name_en" type="radio" name="select">
                <input class="select-item select-name_zh" id="name_zh" type="radio" name="select">
                <ul class="show-area">
                    <li class="show-all f-w-r">全部</li>
                    <li class="show-cas f-w-r">CAS编号</li>
                    <li class="show-name_en f-w-r">INCI英文名</li>
                    <li class="show-name_zh f-w-r">中文名</li>
                </ul>
                <ul class="select-area">
                    <li class="all">
                        <label class="f-w-r" for="all">全部</label>
                    </li>
                    <li class="cas">
                        <label class="f-w-r" for="cas">CAS编号</label>
                    </li>
                    <li class="name_en">
                        <label class="f-w-r" for="name_en">INCI英文名</label>
                    </li>
                    <li class="name_zh">
                        <label class="f-w-r" for="name_zh">中文名</label>
                    </li>
                </ul>
            </div>
            <div class="input-wrap">
                <input id="searchValue" type="text" class="f-w-r" placeholder="请输入CAS编号/INCI英文名/中文名">
                <span style="display: none;" id="clear">x</span>
            </div>
            <div class="icon-wrap"
                 hx-post="{{route('material-query')}}"
                 hx-swap="outerHTML"
                 hx-boost="true"
                 hx-target="#results"
                 hx-trigger="click"
                 hx-vals='js:{
                    "keywords":document.getElementById("searchValue").value,
                    "range":getRangeChecked(),
                    "rules":getRuleChecked(),
                    "modes":getModeChecked(),
                    "_token": "{{ csrf_token() }}"
                  }'
            >
                <i class="i-search"></i>
            </div>
        </div>
        <div class="filter-wrap">
            <ul class="filter-history">
                <li class="f-w-r">二氧化钛</li>
                <li class="f-w-r">苯氧乙醇</li>
                <li class="f-w-r">甘油</li>
            </ul>
            <div class="filter-content">
          <span class="f-w-r filter-toast">
            高级筛选
            <i class="i-search-icon"></i>
          </span>
                <div class="filter-content-wrap">
                    <ul>
                        <li>
                            <p class="f-w-m">请选择要查询的法规清单</p>
                            <ul class="filter-content-options checkbox-options">
                                <li>
                                    <label for="check">
                                        <input class="all-check" type="checkbox" id="all-check" checked>
                                        全选
                                    </label>
                                </li>
                                @foreach($rules as $key => $rule)
                                    <li>
                                        <label for="{{$key}}">
                                            <input class="filter-checkbox" type="checkbox" id="{{$key}}" name="rule"
                                                   checked>
                                            {{$rule}}
                                        </label>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                        <li>
                            <p class="f-w-m">匹配模式</p>
                            <ul class="filter-content-options radio-options">
                                <li>
                                    <label for="fuzzy_search">
                                        <input type="radio" id="fuzzy_search" name="mode" checked>
                                        模糊查询
                                    </label>
                                </li>
                                <li>
                                    <label for="exact_search">
                                        <input type="radio" id="exact_search" name="mode">
                                        精确查找
                                    </label>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>


<div id="results">
    @include("material.content")
</div>

<footer>
    <div class="footer-content">
        <div class="footer-content-left">
            <p class="f-w-m">免责声明：</p>
            <ul class="f-w-r">
                <li>
                    1. 推辞网努力保证内容的准确性并及时更新。但是，推辞网不对信息的质量、准确性、完整性或可靠性负责。
                </li>
                <li>
                    2. 在任何时候，推辞网不对因用户使用本数据库的信息导致的任何声明、损害或者损失负责以及承担责任。
                </li>
                <li>
                    3. 推辞网保留在没有事先通知的情况下进行修改、修正、增加或者移除部分信息的权利。
                </li>
            </ul>
            <p class="f-w-r">
                ◎2016-2022.推辞网络科技(江苏)有限公司. ALL RIGHTS RESERVED.苏ICP备2020053019号-2
            </p>
        </div>
        <div class="footer-content-right">
            <p class="f-w-r">关注推辞网</p>
            <img src="../assets/qcode.png" alt="">
        </div>
    </div>
</footer>
</body>

<script src="{{asset('js/index.js')}}" type="text/javascript" id="scr"></script>
<script src="{{asset('js/htmx1.8.5.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    // 获取查询范围
    function getRangeChecked() {
        const selects = document.getElementsByName("select");
        for (let i = 0; i < selects.length; i++) {
            if (selects[i].checked) return selects[i].id;
        }
    }

    // 获取查询的法规清单
    function getRuleChecked() {
        const rules = document.getElementsByName("rule");
        const ruleIds = [];
        for (let i = 0; i < rules.length; i++) {
            if (rules[i].checked) ruleIds.push(rules[i].id);
        }

        return JSON.stringify(ruleIds)
    }

    // 获取匹配模式 模糊Or精确
    function getModeChecked() {
        const modes = document.getElementsByName("mode");
        for (let i = 0; i < modes.length; i++) {
            if (modes[i].checked) return modes[i].id;
        }
    }

    htmx.onLoad(function (target) {
        // 内容点击展开折叠
        var content_items = document.getElementsByClassName('content-item');
        var content_item_names = document.getElementsByClassName('content-item-name');
        var content_item_toasts = document.getElementsByClassName('content-item-toast');
        var directory_arraws = document.getElementsByClassName('i-content-arraw');
        for (let i = 0; i < content_item_toasts.length; i++) {
            const element = content_item_toasts[i];
            element.addEventListener('click', () => {
                if (content_items[i].style.display == 'block') {
                    content_items[i].style.display = 'none'
                    directory_arraws[i].classList.remove('active')
                } else {
                    content_items[i].style.display = 'block'
                    directory_arraws[i].classList.add('active')
                }
            })
        }
        for (let i = 0; i < content_item_names.length; i++) {
            const element = content_item_names[i];
            element.addEventListener('click', () => {
                if (content_items[i].style.display == 'block') {
                    content_items[i].style.display = 'none'
                    directory_arraws[i].classList.remove('active')
                } else {
                    content_items[i].style.display = 'block'
                    directory_arraws[i].classList.add('active')
                }
            })
        }

        var inputHtml = document.getElementById('searchValue');
        var clearBtn = document.getElementById('clear');
        inputHtml.addEventListener('input', () => {
            if (inputHtml.value) {
                clearBtn.style.display = 'block'
            } else {
                clearBtn.style.display = 'none'
            }
        })
        clearBtn.addEventListener('click', ()=>{
            inputHtml.value=''
            clearBtn.style.display = 'none'
        })
    })
</script>
</html>
